<template>
  <!-- 业务图形化展示 -->
  <div class="view-box segment-list-box">
    <NullData v-if="!stationList.length && operateType !== 'view'" type="route" :title="$t('PLEASE_SELECT_LINK')" />
    <div class="line-box flex align-start hover-row">
      <div v-for="(station, stationIndex) in stationList" :key="stationIndex" class="flex">
        <!-- 站点间纤芯 -->
        <div v-if="station.type === 'cable'" class="cable-box station-cable">
          <NameItem :show-size="10" :show-name="station.cableName" />
          <div class="cable-lines">
            <CableItem :channel-data="station.channel1" :operate-type="operateType" />
            <CableItem
              v-if="station.channel2"
              :channel-data="station.channel2"
              :operate-type="operateType"
            />
          </div>
        </div>
        <!-- 站点框 -->
        <div v-if="station.type === 'station'" class="flex-column align-center">
          <NameItem :show-size="20" :show-name="station.stationName" />
          <div class="station-box border-box">
            <template v-for="(room, roomIndex) in station.roomList">
              <!-- 机房间纤芯 -->
              <div v-if="room.type === 'cable'" :key="roomIndex" class="cable-box">
                <NameItem :show-size="10" :show-name="room.stationName" />
                <div class="cable-lines">
                  <CableItem :channel-data="room.channel1" :operate-type="operateType" />
                  <CableItem
                    v-if="room.channel2"
                    :operate-type="operateType"
                    :channel-data="room.channel2"
                  />
                </div>
              </div>
              <!-- 机房框 -->
              <div v-if="room.type === 'room'" :key="roomIndex" class="flex-column align-center">
                <div
                  class="room-box flex align-start"
                  :class="{
                    'border-box': room.roomId,
                    'first-room': stationIndex === 0 && roomIndex === 0,
                    'last-room':
                      stationIndex === stationList.length - 1 &&
                      roomIndex === station.roomList.length - 1
                  }"
                >
                  <template v-for="(node, nodeIndex) in room.nodeList">
                    <!-- 节点间纤芯 -->
                    <div v-if="node.type === 'cable'" :key="nodeIndex" class="cable-box">
                      <div class="cable-lines">
                        <CableItem :channel-data="node.channel1" :operate-type="operateType" />
                        <CableItem
                          v-if="node.channel2"
                          :channel-data="node.channel2"
                          :operate-type="operateType"
                        />
                      </div>
                      <NameItem :show-size="10" :show-name="node.stationName" />
                    </div>
                    <!-- 节点图片 -->
                    <div v-else :key="nodeIndex" class="node-box flex-column align-center">
                      <i
                        class="iconfont device-icon"
                        :class="'icon-AFS' + node.nodeType.toLowerCase()"
                      />
                      <NameItem :show-size="5" :show-name="node.nodeName" type="node" />
                    </div>
                  </template>
                </div>
                <NameItem v-if="room.roomName" :show-size="20" :show-name="room.roomName" />
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getParentsById } from '@/utils/common'
  import CableItem from './CableItem'
  import NameItem from './NameItem'

  export default {
    components: {
      CableItem,
      NameItem
    },
    props: {
      bizChannelList: {
        type: Array,
        default: () => []
      },
      cableData: {
        type: Object,
        default: () => {}
      },
      operateType: {
        type: String,
        default: 'view'
      }
    },
    data() {
      return {
        stationList: []
      }
    },
    computed: {
      ...mapGetters(['regionTree', 'baseRegionList'])
    },
    methods: {
      // 查询区域、站点名
      getRegionName(regionId) {
        const regionList = (getParentsById(this.regionTree, regionId, 'regionId') || []).reverse()
        return regionList.map(i => i.regionName).join('/')
      },
      getRoomName(roomId) {
        const roomData = this.baseRegionList.find(i => i.regionId === roomId)
        return roomData ? roomData.regionName : ''
      },
      channelStatus(linkIndex, index) {
        if (this.operateType !== 'view') return 'color-recommend'
        if (!this.bizChannelList[linkIndex]) return ''
        const statusColor = [
          {
            color: 'normal',
            status: ['IDLE', 'BACKUP', 'MAIN']
          },
          {
            color: 'fault',
            status: ['DAMAGE']
          },
          { color: 'doing', status: ['OPEN', 'PROCESS', 'HANDLE'] }
        ]
        const segmentList = this.bizChannelList[linkIndex].segmentList
        const data =
          statusColor.find(i => i.status.includes(segmentList[index].status)) || statusColor[0]
        return 'color-' + data.color
      },
      // 整合站点节点数据
      formatData() {
        console.log('this.bizChannelList', this.bizChannelList)
        // console.log('this.cableData', this.cableData)
        const firstChannel = this.bizChannelList[0] ? this.bizChannelList[0].segmentList : []
        const secondChannel = this.bizChannelList[1] ? this.bizChannelList[1].segmentList : null
        const stationList = []
        firstChannel.forEach((i, index) => {
          i.startNode.bizName = this.$utils.handleServiceI18n(i.startNode.bizName)
          i.endNode.bizName = this.$utils.handleServiceI18n(i.endNode.bizName)
          i.channelColor = this.channelStatus(0, index)
          if (secondChannel) {
            secondChannel[index].startNode.bizName = this.$utils.handleServiceI18n(
              secondChannel[index].startNode.bizName
            )
            secondChannel[index].endNode.bizName = this.$utils.handleServiceI18n(
              secondChannel[index].endNode.bizName
            )
            secondChannel[index].channelColor = this.channelStatus(1, index)
          }
          // 添加第一个网段的start节点，后面节点默认添加end节点
          if (index === 0) {
            stationList.push({
              type: 'station',
              stationId: i.startNode.stationId,
              stationName: this.getRegionName(i.startNode.stationId),
              roomList: [
                {
                  type: 'room',
                  roomName: this.getRoomName(i.startNode.roomId),
                  roomId: i.startNode.roomId,
                  nodeList: [i.startNode]
                }
              ]
            })
          }
          // 有光缆添加光缆信息
          let fiberData = {
            type: 'cable',
            cableId: null,
            cableName: '',
            channel1: i,
            channel2: secondChannel ? secondChannel[index] : null
          }
          if (i.fiber) {
            const cableData = this.cableData[i.fiberId] || this.cableData[i.fiber.cableId] || {}
            fiberData = {
              ...fiberData,
              cableId: cableData.cableId || null,
              cableName: cableData.cableName || ''
            }
          }
          // 站点内部节点添加(以最后一个站点做判断，可以重复添加已有站点，回环显示)
          const lastStation = stationList[stationList.length - 1]
          const stationData = lastStation.stationId === i.endNode.stationId ? lastStation : null
          // 站点信息添加
          if (stationData) {
            const lastRoom = stationData.roomList[stationData.roomList.length - 1]
            if (i.endNode.roomId && lastRoom.roomId === i.endNode.roomId) {
              lastRoom.nodeList.push(fiberData)
              lastRoom.nodeList.push(i.endNode)
            } else {
              stationData.roomList.push(fiberData)
              stationData.roomList.push({
                type: 'room',
                roomName: this.getRoomName(i.endNode.roomId),
                roomId: i.endNode.roomId,
                nodeList: [i.endNode]
              })
            }
          } else {
            stationList.push({
              type: 'cable',
              ...fiberData
            })
            stationList.push({
              type: 'station',
              stationId: i.endNode.stationId,
              stationName: this.getRegionName(i.endNode.stationId),
              roomList: [
                {
                  type: 'room',
                  roomName: this.getRoomName(i.endNode.roomId),
                  roomId: i.endNode.roomId,
                  nodeList: [i.endNode]
                }
              ]
            })
          }
        })
        console.log('stationList', stationList)
        this.stationList = stationList
      }
    }
  }
</script>

<style lang="scss">
  @import '@/assets/css/mixin.module.scss';

  .view-box {
    display: flex;
    justify-content: center;
    min-height: 200px;
    align-items: center;

    .line-box {
      padding: 10px 10px 30px;
      max-width: 100%;
      overflow-y: auto;
    }

    .cable-box {
      margin: 0 -80px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;

      &.station-cable {
        padding-top: 72px;
        margin: 0 -90px;
      }

      .cable-name {
        height: 30px;
      }
    }
    .cable-lines {
      height: 62px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }
    .border-box {
      @include themeify {
        border: 2px dashed themed('dividerColor');
      }
    }
    .station-box {
      display: flex;
      padding: 30px 10px 10px;
      justify-content: center;
    }

    .room-box {
      padding: 30px 80px 10px;

      &.first-room {
        padding-left: 20px;
      }

      &.last-room {
        padding-right: 20px;
      }

      .cable-box {
        margin: 0;
      }
    }

    .node-box {
      width: 65px;
    }

    .device-icon {
      font-size: 60px;
      color: transparent;
      background: linear-gradient(to top, #3076f6, #52c4ff);
      background-clip: text;
    }
  }
</style>
